<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
        .box{
          border: 2px solid green;
          width: 50%;
          height: 300px;
          overflow:scroll;
        }
        .content{
          width: 100%;
          background: lightblue;
          height: 1000px;
        }
    </style>
  </head>
  <body>

      <div class="box">
        <p>下面是滚动内容</p>
        <div class="content"></div>
      </div>
    
    
 
      
    <script>
       //滚动的逻辑和下拉加载
       var box = document.querySelector(".box");
       var content = document.querySelector(".content");
      
       console.log(box.offsetWidth);
       console.log(content.offsetWidth);
       // 发现box 自带边框2px
       // scrollWidth =    box.offsetWidth - 2*2 - content.offsetWidth
      
      box.onscroll = function(e){
        console.log(e.target.scrollTop)
      }

       box.onmousewheel = function(e){
         console.log(1)
       }
     
    </script>
  </body>
</html>